<%@ tag language="java" pageEncoding="UTF-8"%>

<%@ attribute name="list" required="true" rtexprvalue="true"%>
<%@ attribute name="value" rtexprvalue="true"%>
<%@ attribute name="onclick"%>
<%@ attribute name="name" rtexprvalue="true"%>
<%@ attribute name="label" rtexprvalue="true"%>
<%@ attribute name="required" rtexprvalue="true"%>
<%@ attribute name="single" rtexprvalue="true"%>
<%@ attribute name="help" rtexprvalue="true"%>
<%@ attribute name="raw" rtexprvalue="true"%>
<%@ attribute name="onchange" rtexprvalue="true"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="base" uri="/WEB-INF/mytags.tld"%>

<c:if test="${required==null}">
	<c:set var="required" value="false" />
</c:if>

<c:if test="${raw==null}">
	<base:map var="items" value="${list}" />
</c:if>

<c:choose>
	<c:when test="${single==null}">
		<c:set var="single" value="1" />
	</c:when>
	<c:when test="${single==1}">
		<c:set var="single" value="3" />
	</c:when>
	<c:otherwise>
		<c:set var="single" value="1" />
	</c:otherwise>
</c:choose>

<script>
	var _template_setting = {
		view : {
			dblClickExpand : false,
			selectedMulti : false
		},
		async : {
			enable : true,
			url : "../../templateAction/template/tree_show.do?node=",
			type : "post"
		},
		callback : {
			onClick : _template_onClick,
			beforeAsync : _template_zTreeBeforeAsync
		}
	};

	function _template_zTreeBeforeAsync(treeId, treeNode) {
		if (treeNode == null)
			return true;
		if (treeNode.userdata != null && treeNode.userdata == 'end')
			return false;
		return true;
	};

	function _template_onClick(event, treeId, treeNode) {
		$("#_template_leaf").empty();
		$("#_template_leaf").append("<option value='-1'>--请选择--</option>");
		var url = "../../templateAction/template/tree_show.do?node="
				+ treeNode.id;
		$.getJSON(url, function(json) {
			for ( var i = 0; i < json.length; i++) {
				var option = "<option value='"+json[i].id+"'>" + json[i].name
						+ "</option>";
				$("#_template_leaf").append(option);
			}
		});
		var zTree = $.fn.zTree.getZTreeObj("_template");
		nodes = zTree.getSelectedNodes();
		var v = "";
		var id = "";
		if (nodes.length > 0) {
			v = nodes[0].name;
			id = nodes[0].id;
		}
		var selectValue = $("#_template_selectValue");
		selectValue.attr("value", v);
	}

	function showTemplate() {
		var cityObj = $("#_template_selectValue");
		var cityOffset = $("#_template_selectValue").offset();
		$("#_template_content").css({
			left : cityOffset.left + "px",
			top : cityOffset.top + cityObj.outerHeight() + "px"
		}).slideDown("fast");

		$("body").bind("mousedown", bodyDown);
	}
	function _template_hideMenu() {
		$("#_template_content").fadeOut("fast");
		$("body").unbind("mousedown", bodyDown);
	}
	function bodyDown(event) {
		if (!(event.target.id == "menuBtn" || event.target.id == "_template_selectValue"
				|| event.target.id == "_template_content" || $(event.target).parents(
				"#_template_content").length > 0)) {
			_template_hideMenu();
		}
	}

	$(document).ready(function() {
		$("#_template_leaf").append("<option value='-1'>--请选择--</option>");
		$.fn.zTree.init($("#_template"), _template_setting);
	});
</script>


<th>
	<c:if test="${required}">
		<label class="requireField">*</label>
	</c:if> <label>${label}:</label>
</th>

<td colspan="${single}">
	<input id="_template_selectValue"	type="text" readonly style="width: 120px;float: left;"
			onclick="showTemplate();"/>
	<select id="_template_leaf" style="float: left;margin-left: 10px;padding: 2px" name="${name}"
		<c:if test="${onclick!=null}"> onclick="${onclick}"</c:if>
		<c:if test="${onchange!=null}"> onchange="${onchange}"</c:if>>
		<c:forEach items="${items}" var="item">
			<option value="${item.key}"
				<c:if test="${item.key==value}"> selected="selected"</c:if>>${item.value}</option>
		</c:forEach>
	</select>${help}
	<div id="_template_content" style="display: none; position: absolute;">
	<ul id="_template" class="ztree"
		style="margin-top: 0; width: 180px; height: 200px;"></ul>
	</div>
</td>
